<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <style>
        .card-container {
            position: absolute;
			top: calc(50% - 580px / 2);
        }
		
        .img-card {
            position: absolute;
            width: 300px;
            height: 500px;
            padding: 10px 10px;            
            margin: 30px 20px;            
            display: inline-block; 
            border-left: 2px dotted;
            border-right: 2px dotted;
            border-radius: 50px;    
            background-color: white;        
        }
        
        .img-card:nth-child(1) { left: 5px;  }
        .img-card:nth-child(2) { left: 10px; }
        .img-card:nth-child(3) { left: 15px; }
        .img-card:nth-child(4) { left: 20px; }
        .img-card:nth-child(5) { left: 25px; }
        .img-card:nth-child(6) { left: 30px; }
        .img-card:nth-child(7) { left: 35px; }
        .img-card:nth-child(8) { left: 40px; }
        .img-card:nth-child(9) { left: 45px; }
        
        .img-card img {
            position: absolute;
            width: 300px;
        }

		@-webkit-keyframes card
		{
			15% { transform: rotateY(360deg); left: 424px; }
			30% { transform: rotateY(360deg); left: calc(100vw - 384px); }
			40% { transform: rotateZ(3deg); }
			50% { transform: rotateZ(-3deg); }
			60% { transform: rotateZ(0deg); }
			70% { transform: rotateY(360deg); left: calc(100vw - 384px); }
			85% { transform: rotateY(0deg); left: 45px; }
		}
		
		@-webkit-keyframes text-sceen 
		{
			0%  { opacity: 0.0; }
			20% { opacity: 0.0; }
			40% { opacity: 1.0; }
			60% { opacity: 1.0; }
			80% { opacity: 0.0; }
			100%{ opacity: 0.0; }
		}
		
		.text {
			animation: text-sceen 8s;
			-webkit-animation: text-sceen 8s;
			animation-iteration-count: infinite;
			-webkit-animation-iteration-count: infinite;				
		}
		
		.img-card {
			animation: card 8s;
			-webkit-animation: card 8s;
			animation-iteration-count: infinite;
			-webkit-animation-iteration-count: infinite;
			animation-play-state: paused;
			-webkit-animation-play-state: paused;			
		}
		
        .img-head {
            top: 0px;
            z-index: 1000;
        }
		
        .img-foot {
            bottom: 0px;
            z-index: 1000;
        }
		
        .img-body {
            top: 50px;
            z-index: 999;
        }
		
		.text {
			position: fixed;
			margin: auto;
			left: 35px;
			right: 0;
			top: 50%;
			bottom: 0;
			width: calc(100% - 384px * 2);
			height: calc(100% - 120px);
			z-index: 1010;
			padding: 35px 0px;
			font-weight: 900;
			text-align: center;
			font-family: 黑体;
			font-size: 50px;
		}
		
		footer {
			position: absolute;
			left: calc(50% - 667px / 2);
			bottom: 5px;
			font-family: 黑体;
			font-weight: bold;
			z-index: 1011;
			color: grey;
		}
    </style>
</head>
<body>
	<div class="text">
		"持盾，不要问我为什么"
	</div>
    <div class="card-container">
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="1.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="2.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="3.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="4.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="5.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="6.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="7.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="8.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>
        <div class="img-card">
            <img class="img-head" src="u.png"/>
            <img class="img-body" src="9.jpg"/>
            <img class="img-foot" src="d.png"/>
        </div>        
    </div>
	<footer>
		CopyRight@2016 | Product By HTML5 & CSS3 & jQuery & 高博楠 | Get it from <a href="https://git.oschina.net/lingwulukong/CSS-01">Git@OSC</a>.
	</footer>
	<audio src="music.mp3" loop autoplay />
	<script src="jquery-2.2.0.min.js"></script>
	<script>
	
		var texts = [
			"持盾 不要问我为什么",
			"常立Flag 然后拔不出来",
			"特性幸运E 助人不为乐",
			"EX咖喱棒 专克服务器",
			"所写注释和代码无人能懂",
			"看书学习两不误 lovelive爱技术",
			"人生五十年 如梦亦似幻",
			"和若干台Computer日夜相伴",
			"不搞大事情，跑的没香港记者快",		
		];
	
		$(function() {
		
			$('.img-card:nth-child(9)').css('animation-play-state','running');
			
			var cnt = 0;
			
			$(document).on("webkitAnimationIteration", function(e) {
				
				if(e.originalEvent.animationName !== 'text-sceen') {
				
					cnt += 1; if(cnt >= 9) cnt = 0;
					
					var cards = $('.img-card');
					
					var currElement = $(cards[8]);
					
					var nextElement = $(cards[7]);
					
					$('.text').html(texts[cnt]);
					
					currElement.css('animation-play-state', 'paused');
					
					currElement.parent().children().first().before(currElement);
					
					nextElement.css('animation-play-state', 'running');					
				}
			});
		});
	</script>
</body>
